 /* 头尾各个页面相同的样式 */
 /* 版心 */
 .wrapper {
     margin: 0 auto;
     width: 1240px;
 }

 /* 快捷键 */
 .shortcut {
     height: 52px;
     background-color: #333;
 }

 .shortcut .wrapper {
     display: flex;
     justify-content: flex-end;
     height: 52px;
     /* background-color: pink; */
 }

 .shortcut ul {
     display: flex;
     line-height: 52px;

 }

 .shortcut li a {
     padding: 0 15px;
     border-right: 1px solid #999;
     font-size: 14px;
     color: #fff;

 }

 /* .shortcut li:nth-child(7) a{
    border-right: 0 ;
 }
  */
 .shortcut li:last-child a {
     border-right: 0 solid #000;
 }

 .shortcut li .iconfont {
     margin-right: 4px;
     vertical-align: middle;
 }

 .shortcut li .login {
     color: #5eb69c;
 }

 /* 头部 */
 .heard {
     display: flex;
     margin-top: 22PX;
     margin-bottom: 22PX;
     height: 88px;
     /* background-color: pink; */
 }

 /* logo */
 .logo {
     margin-right: 40px;
     width: 200px;
     height: 88px;
     background-color: skyblue;
 }

 .logo a {
     display: block;
     width: 200px;
     height: 88px;
     background-image: url(../images/logo.png);
     font-size: 0;
 }

 /* 导航 */
 .nav {
     margin-top: 33px;
     margin-right: 28px;
 }

 .nav ul {
     display: flex;
 }

 .nav li {
     margin-right: 47px;
 }

 .nav li a {
     padding-bottom: 10px;
     /* background-color: skyblue; */
 }

 .nav li a:hover {
     border-bottom: 2px solid #5eb69c;
     color: #5eb69c;
 }

 /* 搜索 */
 .search {
     display: flex;
     margin-top: 33px;
     margin-right: 45px;
     width: 170px;
     height: 34px;
     border-bottom: 2px solid #f4f4f4;
 }

 .search .iconfont {
     margin-right: 8px;
     font-size: 18px;
     color: #ccc;
 }

 .search input {
     /* 浏览器优先生效 input 标签的默认宽度 所以 flex：1 不生效 */
     /* 解决办法：重置input默认宽度 width：0 */
     flex: 1;
     width: 0;
 }

 .search input::placeholder {
     font-size: 16px;
     color: #ccc;
 }

 /* 购物车 */
 .cart {
     position: relative;
     margin-top: 32px;
 }

 .cart .iconfont {
     font-size: 24px;
 }

 .cart i {
     position: absolute;
     top: 1px;
     /* right 定位右对齐 如果文字太多 向左撑开 可能盖住其他东西 */
     /* right: 1px; */
     /* left 定位左对齐 文字过多 向右撑开 */
     left: 15px;
     padding: 0 6px;
     height: 15px;
     background-color: #e26327;
     border-radius: 8px;
     font-size: 14px;
     color: #fffefe;
     line-height: 15px;
 }

 /* 底部 */
 .footer {
     height: 580px;
     background-color: #f5f5f5;
 }

 /* 服务 */
 .service {
     padding: 60px 0;
     height: 178px;
     border-bottom: 2px solid #e8e8e8;
 }

 .service ul {
     display: flex;
     justify-content: space-evenly;
 }

 .service li {
     display: flex;
     width: 190px;
     height: 58px;
     /* background-color: pink; */
 }

 .service li h5 {
     margin-right: 20px;
     width: 58px;
     height: 58px;
     background-image: url(../images/sprite.png);
 }

 .service li p {
     font-size: 20px;
     line-height: 58px;
 }

 .service li:nth-child(2) h5 {
     background-position: 0 -58px;
 }

 .service li:nth-child(3) h5 {
     background-position: 0 -116px;
 }

 .service li:nth-child(4) h5 {
     background-position: 0 -174px;
 }

 /* 帮助中心 */
 .help {
     display: flex;
     justify-content: space-between;
     padding-top: 60px;
     height: 300px;
     /* background-color: pink; */
 }

 /* left */
 .help .left {
     display: flex;
 }

 .help .left dl {
     margin-right: 84px;
 }

 .help .left dl:last-child {
     margin-right: 0;
 }

 .help .left dt {
     margin-bottom: 30px;
     font-size: 18px;
 }

 .help .left dd {
     margin-bottom: 10px;
 }

 .help .left a {
     color: #969696;
 }

 .help .left .iconfont {
     color: #5eb69c;
 }

 /* right */
 .help .right ul {
     display: flex;
 }

 .help .right li:first-child {
     margin-right: 55px;
 }

 .help .right .pic {
     margin-bottom: 10px;
     width: 120px;
     height: 120px;
 }

 .help .right p {
     color: #969696;
     text-align: center;
 }

 /* 版权 */
 .copyright {
     text-align: center;
 }

 .copyright p {
     margin-bottom: 10px;
     color: #a1a1a1;
 }

 .copyright p a {
     margin: 0 10px;
     color: #a1a1a1;
 }

 /* banner */
 .banner {
     height: 500px;
     background-color: #f5f5f5;

 }

 .banner .wrapper {
     position: relative;
     height: 500px;
     background-color: pink;
     overflow: hidden;
 }

 /* 图片 */
 .banner .pic {
     display: flex;
     /* flex 布局 父级宽度不够用 子级被挤小 不想被挤 增大父级尺寸 */
     width: 3720px;
 }

 /* 侧导航 */
 .subnav {
     position: absolute;
     left: 0;
     top: 0;
     width: 250px;
     height: 500px;
     background-color: rgba(0, 0, 0, 0.42);
 }

 .subnav li {
     display: flex;
     justify-content: space-between;
     padding-left: 30px;
     padding-right: 12px;
     height: 50px;
     /* background-color: pink; */
     line-height: 50px;
     color: #fff;
     cursor: pointer;
 }

 .subnav li a {
     margin-right: 5px;
     font-size: 14px;
     color: #fff;
 }

 .subnav .classify {
     margin-right: 14px;
     font-size: 18px;
 }

 .subnav .iconfont {
     font-size: 16px;
 }

 .subnav li:hover {
     background-color: #00be9a;
 }

 /* 圆点指示器 */
 .banner ol {
     position: absolute;
     right: 16px;
     bottom: 17px;
     display: flex;
 }

 .banner ol li {
     margin-left: 8px;
     width: 22px;
     height: 22px;
     /* background-color: pink; */
     border-radius: 50%;
     cursor: pointer;
 }

 .banner ol i {
     display: block;
     margin: 4px;
     width: 14px;
     height: 14px;
     background-color: rgba(225, 225, 225, 0.5);
     border-radius: 50%;
 }

 /* 选中：li半透明 i白色 */
 .banner ol .current {
     background-color: rgba(225, 225, 225, 0.5);
 }

 .banner ol .current i {
     background-color: #fff;
 }

 /* 新鲜好物 */
 /* 标题——公共样式 */
 .title {
     display: flex;
     justify-content: space-between;
     margin-top: 40px;
     margin-bottom: 30px;
     height: 42px;
     /* background-color: pink; */
 }

 .title .left {
     display: flex;
 }

 .title .left h3 {
     margin-right: 35px;
     font-size: 30px;
 }

 .title .left p {
     align-self: flex-end;
     color: #a1a1a1;
 }

 .title .right .more {
     line-height: 42px;
     color: #a1a1a1;
 }

 .title .right .more .iconfont {
     margin-left: 10px;
 }

 /* 内容 --公共样式 */
 .bd ul {
     display: flex;
     justify-content: space-between;
 }

 .bd li {
     width: 304px;
     height: 404px;
     background-color: #eef9f4;
 }
 .bd li .pic{
    width: 304px;
    height: 304px;
 }
 .bd li .txt{
    text-align: center;
 }
 .bd li h4{
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 20px;
 }
 .goods .bd p{
    font-size: 18px;
    color: #aa2113;
 }
 .goods .bd p span{
    margin-left: 3px;
    font-size: 22px;
 }
 /* 人气推荐 */
 .recommend .bd li {
    background-color: #fff;
 }
 .recommend .bd p{
    color:  #a1a1a1;
 }